<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <link rel="stylesheet" href="/assets/amazeui/css/amazeui.min.css"/>
    <link rel="stylesheet" href="/assets/amazeui/css/amazeui.datatables.min.css"/>
    <link rel="stylesheet" href="/assets/iziModal/css/iziModal.css"/>
</head>
<body>

<div class="am-g am-margin-top-lg">
    <div class="am-u-sm-3 am-u-sm-offset-9 am-text-right am-u-end">
        <div class="am-input-group am-input-group-sm">
            <input id="i_search" type="text" class="am-form-field am-input-sm" placeholder="输入人员名称"/>
            <span class="am-input-group-btn">
                            <button class="am-btn  am-btn-primary am-btn-sm am-icon-search" type="button" onclick="searchQuery();"></button>
                        </span>
        </div>
    </div>
</div>
<table width="100%" class="am-table am-table-striped am-table-bordered
            am-table-compact am-text-nowrap am-table-hover" id="table">
    <thead>
    <tr class="am-text-center">
        <td>人员编号</td>
        <td>姓名</td>
        <td>部门</td>
        <td>岗位</td>
        <td>电话</td>
        <td>用户名</td>
        <td>创建时间</td>
        <td>操作</td>
    </tr>
    </thead>
    <tbody class="am-text-center"></tbody>
</table>

<@shiro.hasPermission name="employee:add">
<div class="am-g">
    <div class="am-u-sm-12">
        <button class="am-btn am-btn-secondary am-radius am-btn-xs" onclick="toAdd();">新增人员</button>
    </div>
</div>
</@shiro.hasPermission>


<div id="modal" class="iziModal">
    <div class="am-g am-margin-top">
        <div class="am-u-sm-12">
            <form class="am-form am-form-horizontal">
                <input type="hidden" id="employeeId"/>
                <div class="am-form-group">
                    <label for="i_name" class="am-u-sm-2 am-form-label">姓名</label>
                    <div class="am-u-sm-10">
                        <input type="text" id="i_name" placeholder="输入姓名"/>
                    </div>
                </div>
                <div class="am-form-group">
                    <label for="i_post" class="am-u-sm-2 am-form-label">岗位</label>
                    <div class="am-u-sm-10">
                        <input type="text" id="i_post" placeholder="输入岗位"/>
                    </div>
                </div>
                <div class="am-form-group">
                    <label for="i_phoneNum" class="am-u-sm-2 am-form-label">电话</label>
                    <div class="am-u-sm-10">
                        <input type="text" id="i_phoneNum" placeholder="输入电话"/>
                    </div>
                </div>
                <div class="am-form-group">
                    <label for="i_dept" class="am-u-sm-2 am-form-label">部门</label>
                    <div class="am-u-sm-10">
                        <select id="i_dept">
                            <#list depts as dept>
                                <option value="${dept.deptId}">${dept.name}</option>
                            </#list>
                        </select>
                    </div>
                </div>
                <div class="am-form-group am-text-center">
                    <button class="am-btn am-btn-secondary am-radius am-btn-xs submit"">提交</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div id="memberModal" class="iziModal">
    <div class="am-g am-margin-top">
        <div class="am-u-sm-12">
            <form class="am-form am-form-horizontal">
                <div class="am-form-group">
                    <input type="hidden" id="m-employeeId"/>
                    <input type="hidden" id="m-deptId"/>
                    <label for="m-username" class="am-u-sm-3 am-form-label">用户名</label>
                    <div class="am-u-sm-9">
                        <input type="text" id="m-username" placeholder="输入用户名"/>
                    </div>
                </div>
                <div class="am-form-group">
                    <label for="m-password" class="am-u-sm-3 am-form-label">密码</label>
                    <div class="am-u-sm-9">
                        <input type="password" id="m-password" placeholder="输入密码"/>
                    </div>
                </div>
                <div class="am-form-group">
                    <label for="m-rePassword" class="am-u-sm-3 am-form-label">确认密码</label>
                    <div class="am-u-sm-9">
                        <input type="password" id="m-rePassword" placeholder="输入确认密码"/>
                    </div>
                </div>
                <div class="am-form-group am-text-center">
                    <button class="am-btn am-btn-secondary am-radius am-btn-xs submit"">提交</button>
                </div>
            </form>
        </div>
    </div>
</div>




<script src="/assets/iziModal/js/jquery-2.2.4.js"></script>
<script src="/assets/iziModal/js/iziModal.js"></script>
<script src="/assets/amazeui/js/amazeui.js"></script>
<script src="/assets/amazeui/js/amazeui.datatables.min.js"></script>
<script>

var table;
$(function () {
    loadTable();
    init();
});

function searchQuery() {
    table.ajax.reload();
}

function createMember(row){
    $("#m-employeeId").val(row.employeeId);
    $("#m-deptId").val(row.deptId);
    $("#m-username").val('');
    $("#m-password").val('');
    $("#m-rePassword").val('');
    $("#memberModal").iziModal('setTitle','添加用户');
    $("#memberModal").iziModal('open');
}

function edit(row) {

    $("#employeeId").val(row.employeeId);
    $("#i_name").val(row.name);
    $("#i_post").val(row.post);
    $("#i_phoneNum").val(row.phoneNum);
    $("#i_dept").val(row.deptId)
    $("#modal").iziModal('setTitle','修改人员');
    $("#modal").iziModal('open');
}

function toAdd() {

    $("#employeeId").val('');
    $("#i_name").val('');
    $("#i_post").val('');
    $("#i_phoneNum").val('');
    $("#modal").iziModal('setTitle','修改人员');
    $("#modal").iziModal('open');
}

function init() {
    $("#modal").iziModal({
        title: 'title',
        icon: 'icon-star',
        headerColor: '#00af66',
        width: 600,
        transitionIn: 'bounceInUp',
        transitionOut: 'bounceOutDown',
        focusInput: true,
        overlayClose: false,
        closeOnEscape: false,
        openFullscreen: false
    });
    $("#modal").on('click','.submit',function(event){
        event.preventDefault();
        var employeeId = $("#employeeId").val();
        var name = $("#i_name").val();
        var post = $("#i_post").val();
        var phoneNum = $("#i_phoneNum").val();
        var deptId = $("#i_dept").val();
        if(name.length==0){
            alert("姓名不能为空");
            return;
        }
        if(post.length==0){
            alert("岗位不能为空");
            return;
        }
        if(phoneNum.length==0){
            alert("联系电话不能为空");
        }
        $.ajax({
            type: 'post',
            url: '/sys/employee/save',
            dataType: 'json',
            data: {
                employeeId: employeeId,
                name: name,
                post: post,
                phoneNum: phoneNum,
                deptId: deptId
            },
            success: function(result){
                if(result.code==1){
                    alert(result.errMsg);
                }else{
                    $("#modal").iziModal('close');
                    table.draw(false);
                }
            }
        });

    });

    $("#memberModal").iziModal({
        title: 'title',
        icon: 'icon-star',
        headerColor: '#00af66',
        width: 600,
        transitionIn: 'bounceInUp',
        transitionOut: 'bounceOutDown',
        focusInput: true,
        overlayClose: false,
        closeOnEscape: false,
        openFullscreen: false
    });

    $("#memberModal").on('click','.submit',function(event){
        event.preventDefault();
        var employeeId = $("#m-employeeId").val();
        var deptId = $("#m-deptId").val();
        var username = $("#m-username").val();
        var password = $("#m-password").val();
        var rePassword = $("#m-rePassword").val();
        if(username.length==0){
            alert("用户名不能为空");
            return;
        }
        if(password.length == 0){
            alert("密码不能为空");
            return;
        }
        if(rePassword==null){
            alert("确认密码不能为空");
            return;
        }
        if(password.length<6 || password.length>12){
            alert("密码必须为6-12位");
            return;
        }
        if(password!=rePassword){
            alert("两次密码输入不一致");
        }
        $.ajax({
            type: 'post',
            url: '/sys/member/createMember',
            dataType: 'json',
            data: {
                employeeId: employeeId,
                username: username,
                password: password,
                deptId: deptId
            },
            success: function(result){
                if(result.code==1){
                    alert(result.errMsg);
                }else{
                    $("#memberModal").iziModal('close');
                    table.draw(false);
                }
            }
        });
    });
}

function loadTable() {
    table = $("#table").DataTable({
        ordering: false,
        bLengthChange: false,
        ordering: false,
        bSort: false,
        serverSide: true,
        searching: false,
        iDisplayLength: 10,
        ajax: {
            url: "/sys/employee/queryList",
            data: function (d) {
                var key = $("#i_search").val();
                if(key){
                    d.key = key;
                }
            }
        },
        columns: [
            {data: "employeeId"},
            {data: "name"},
            {data: "deptName"},
            {data: "post"},
            {data: "phoneNum"},
            {data: "memberName"},
            {data: "createTime"},
            {
                data: 'op',
                render: function (data,type,row,meta){
                    var btn;
                    if(row.memberId != 0){
                        btn = "<div>" +
                                <@shiro.hasPermission name="employee:edit">
                                "<button onclick='edit("+JSON.stringify(row)+");' class='am-btn-xs am-btn am-radius am-btn-secondary'>修改</button> " +
                                </@shiro.hasPermission>
                                <@shiro.hasPermission name="employee:delete">
                                "<button onclick='toDel("+row.employeeId+");' class='am-btn-xs am-btn am-radius am-btn-warning'>删除</button> " +
                                </@shiro.hasPermission>
                                "</div>";
                    }else {
                        btn = "<div>" +
                                <@shiro.hasPermission name="employee:edit">
                                "<button onclick='edit("+JSON.stringify(row)+");' class='am-btn-xs am-btn am-radius am-btn-secondary'>修改</button> " +
                                </@shiro.hasPermission>
                                <@shiro.hasPermission name="employee:delete">
                                "<button onclick='toDel("+row.employeeId+");' class='am-btn-xs am-btn am-radius am-btn-warning'>删除</button> " +
                                </@shiro.hasPermission>
                                <@shiro.hasPermission name="employee:createMember">
                                "<button onclick='createMember("+JSON.stringify(row)+");' " +
                                "class='am-btn-xs am-btn am-radius am-btn-secondary'>创建用户</button> " +
                                </@shiro.hasPermission>
                                "</div>";
                    }

                    return btn;
                }
            }
        ]
    });
}

</script>
</body>
</html>